import React, { Component } from 'react'
import { Card, Table, Modal, Button, message, Badge } from 'antd'
import axios from '../../axios/index'

export default class HighTable extends Component {

    state = {

    }

    params = {

    }
    
    componentDidMount() {
        this.request()
    }

    request = () => {
        axios.ajax({
            url: '/table/high/list',
            data: {
                params: {
                    /* 
                        1. 这里为什么不用state而是用params, 因为state中的变量用来渲染html中dom结构的, 
                        而改变页码不需要渲染dom结构，他只是一个参数一个变量
                        2. 这里的页码木有发生变化，是因为mock数据中定义了page是1，所以接口中返回的一直是
                        第一页，真正调用接口是不会发生这种情况的
                    */
                    page: this.params.page
                }
                // isShowLoading: false
            }
        }).then(res => {
            if(res.code === 0){
                res.result.list.map((item, index) => item.key = index)
            }
            this.setState({
                dataSource: res.result.list
            })
        })
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            sortOrder: sorter.order
        })
    }

    handleDelete = (item) => {
        Modal.confirm({
            title: '确认',
            content: `你确认要删除${item.userName}此条数据吗`,
            onOk: () => {
                message.success('删除成功')
                this.request()
            }
        })
    }

    render() {
        const columns1 = [
            {
                title: 'id',
                key: 'id',
                width: 80,
                dataIndex: 'id'
            },
            {
                title: '用户名',
                key: 'userName',
                width: 80,
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                width: 80,
                dataIndex: 'sex',
                render(sex) {
                    return sex === 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                key: 'state',
                width: 80,
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '风华浪子',
                        '3': '北大才子',
                        '4': '百度FE',
                        '5': '创业者'
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                key: 'interest',
                width: 80,
                dataIndex: 'interest',
                render(abc) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[abc]
                }
            },
            {
                title: '生日',
                key: 'birthday',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                width: 120,
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                width: 80,
                dataIndex: 'time'
            }
        ]
        const columns2 = [
            {
                title: 'id',
                key: 'id',
                width: 80,
                fixed:'left',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                key: 'userName',
                width: 80,
                fixed: 'left',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                width: 80,
                dataIndex: 'sex',
                render(sex) {
                    return sex === 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                key: 'state',
                width: 80,
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '风华浪子',
                        '3': '北大才子',
                        '4': '百度FE',
                        '5': '创业者'
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                key: 'interest',
                width: 80,
                dataIndex: 'interest',
                render(abc) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[abc];
                }
            },
            {
                title: '生日',
                key: 'birthday1',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '生日',
                key: 'birthday2',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday3',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday4',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday5',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday6',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday7',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday8',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday9',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday10',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday11',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday12',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday13',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday14',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday15',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday16',
                width: 120,
                dataIndex: 'birthday'
            }, {
                title: '生日',
                key: 'birthday17',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                width: 120,
                fixed: 'right',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                width: 80,
                fixed: 'right',
                dataIndex: 'time'
            }
        ]
        const columns3 = [
            {
                title: 'id',
                key: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                key: 'userName',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render(sex) {
                    return sex = 1 ? '男' : '女'
                }
            },
            {
                title: '年龄',
                key: 'age',
                dataIndex: 'age',
                sorter:(a,b)=>{
                    return a.age - b.age;
                },
                sortOrder: this.state.sortOrder
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '风华浪子',
                        '3': '北大才子',
                        '4': '百度FE',
                        '5': '创业者'
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render(abc) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[abc];
                }
            },
            {
                title: '生日',
                key: 'birthday',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                dataIndex: 'time'
            }
        ]
        const columns4 = [
            {
                title: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex === 1 ? '男' : '女'
                }
            },
            {
                title: '年龄',
                dataIndex: 'age'
            },
            {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': <Badge status="success" text="拥有"/>,
                        '2': <Badge status="error" text="报错" />,
                        '3': <Badge status="default" text="正常" />,
                        '4': <Badge status="processing" text="进行中" />,
                        '5': <Badge status="warning" text="警告" />
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                dataIndex: 'interest',
                render(abc) {
                    let config = {
                        '1': <Badge status="success" text="游泳"/>,
                        '2': <Badge status="error" text="唱歌" />,
                        '3': <Badge status="default" text="攀岩" />,
                        '4': <Badge status="processing" text="蹦极" />,
                        '5': <Badge status="warning" text="剪纸" />,
                        '6': <Badge status="success" text="跑步"/>,
                        '7': <Badge status="error" text="吹牛" />,
                        '8': <Badge status="default" text="下棋" />,
                        '9': <Badge status="processing" text="体操" />,
                        '10': <Badge status="warning" text="拳击" />
                    }
                    return config[abc];
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address'
            },
            {
                title: '操作',
                render: (text, item) => {
                    return (
                        <Button type="danger" onClick={() => { this.handleDelete(item) }}>删除</Button>
                    )
                }
            }
        ]
        return (
            <div>
                <Card title="头部固定">
                    <Table
                        bordered
                        columns={columns1}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{y:240}}></Table>
                </Card>
                <Card title="左侧固定">
                    <Table
                        bordered
                        columns={columns2}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{x:2650}}></Table>
                </Card>
                <Card title="表格排序">
                    <Table
                        bordered
                        columns={columns3}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        onChange={this.handleChange}
                        ></Table>
                </Card>
                <Card title="操作按钮">
                    <Table
                        bordered
                        columns={columns4}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        ></Table>
                </Card>
            </div>
        )
    }
}